<template>
  <div class="station-detail p-10">
    <p class="station-name">{{ info.facilityName }}</p>
    <p>
      <span class="title">{{ $t('BELONGS_REGION_NAME') }}：</span>
      <span class="detail">{{ regionList.map(i => i.regionName).join('/') }}</span>
    </p>
    <p>
      <span class="title">{{ $t('FACILITY_TYPE') }}：</span>
      <span class="detail">{{ customDictMap[info.facilityType] }}</span>
    </p>
    <p>
      <span class="title">{{ $t('GEOGRAPHIC_LOCATION') }}：</span>
      <span class="detail">
        {{ $t('LONGITUDE') }}:{{ info.longitude }}；{{ $t('LATITUDE') }}:{{ info.latitude }}
      </span>
    </p>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { getParentsById } from '@/utils/common'

  export default {
    props: {
      params: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        info: {
          facilityName: '',
          facilityType: '',
          longitude: '',
          latitude: ''
        },
        regionList: []
      }
    },
    computed: {
      ...mapGetters(['stationTree', 'customDictMap'])
    },
    watch: {
      params(newVal, oldVal) {
        console.log(this.params)
        if (newVal && newVal.facilityName) {
          this.info = newVal || {}
          if (!newVal.regionId) return
          const list = getParentsById(this.stationTree, newVal.regionId, 'regionId') || []
          list.reverse()
          this.regionList = list
        }
      }
    },
    mounted() {
      console.log(this.params)
    }
  }
</script>
